<template>
  <div class="zoom-control">
    <div class="scale-btns">
      <!--      <span class="zoom-btn" @click="fitView">-->
      <!--        <a-icon-font type="iconfangdahuabanquanping"/>-->
      <!--      </span>-->

      <span>
        <a-select
          v-model="scaleType"
          label-in-value
          @change="handleZoomTypeChange"
        >
          <a-select-option v-for="option in zoomTypeOptions" :key="option.key">
            {{ option.name }}
          </a-select-option>
        </a-select>
      </span>

      <span class="zoom-btn" @click="reduceScale">
        <a-icon-font type="iconjianhao" />
      </span>
      <span class="zoom-btn" @click="addScale">
        <a-icon-font type="iconjiahao" />
      </span>
    </div>
    <span class="vertical-divider"></span>
    <span class="zoom-scale">{{ (scaleLevel * 100).toFixed(0) }}%</span>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class GraphZoomControl extends Vue {
  @Prop({ type: Number, default: 1 }) zoomLevel!: number
  @Prop({ type: String, default: 'geometry' }) zoomType!: string

  private scaleLevel: number = 1
  private scaleType: any = { key: 'geometry', name: '几何' }

  private zoomTypeOptions: any[] = [
    { key: 'geometry', name: '几何' },
    { key: 'semantics', name: '语义' },
  ]

  private mounted() {
    this.scaleLevel = this.zoomLevel

    if (this.zoomType === 'geometry') {
      ;[this.scaleType] = this.zoomTypeOptions
    } else {
      ;[, this.scaleType] = this.zoomTypeOptions
    }
  }

  @Watch('zoomLevel')
  public zoomLevelChange(newLevel: number) {
    this.scaleLevel = newLevel
  }

  @Watch('zoomType')
  public zoomTypeChange(newType: string) {
    if (newType === 'geometry') {
      ;[this.scaleType] = this.zoomTypeOptions
    } else {
      ;[, this.scaleType] = this.zoomTypeOptions
    }
  }

  @Emit('scale-type-change')
  public handleZoomTypeChange(event: any) {
    const { key } = event
    this.scaleType = event
    this.scaleLevel = 1
    return key
  }

  @Emit('scale')
  private addScale() {
    this.scaleLevel += 0.1
    return this.scaleLevel
  }

  @Emit('scale')
  private reduceScale() {
    this.scaleLevel -= 0.1
    return this.scaleLevel
  }

  @Emit('fit-view')
  public fitView() {
    return 15
  }
}
</script>

<style scoped lang="less">
.zoom-control {
  align-items: center;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  bottom: 40px;
  box-sizing: border-box;
  display: flex;
  height: 24px;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 4px;
  position: absolute;
  right: 20px;
  transition: width 0.3s;
  width: 175px;
  z-index: 100;

  .vertical-divider {
    background-color: #999;
    height: 16px;
    margin: 0 8px;
    width: 1px;
  }

  .zoom-scale {
    color: #5d637e;
    display: inline-block;
    flex-shrink: 0;
    height: 20px;
    line-height: 20px;
    position: relative;
    text-align: center;
    user-select: none;
    width: 39px;
  }

  .scale-btns {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-around;
    width: 104px;

    .zoom-btn {
      border-radius: 1px;
      cursor: pointer;
      display: inline-block;
      flex-shrink: 0;
      height: 18px;
      line-height: 18px;
      padding: 0 2px;
      width: 18px;

      &:hover {
        background-color: #f1f1f1;
      }
    }
  }
}

// 修改下拉框
.ant-select {
  font-size: 13px;

  /deep/ .ant-select-selection {
    border: 0 solid #fff;
  }
}

/deep/ .ant-select-open .ant-select-selection {
  box-shadow: 0 0 0 #fff;
}

/deep/ .ant-select-focused .ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active {
  box-shadow: 0 0 0 #fff;
}
</style>
